<@override name="contest_content">
<div>
  <#if clarifyList?? && (clarifyList?size > 0)>
    <#list clarifyList as clarify>
      <span class="name"><a href="user/profile/${clarify.name!}" target="_blank">${clarify.name!}</a></span> /
      Post at <span class="timestamp" data="${clarify.ctime}"></span>
      <#if clarify.num??>/ Problem <a
              href="contest/problem/${clarify.cid!}-${num2alpha(clarify.num)}">${num2alpha(clarify.num)}
        : ${clarify.title!}</a></#if>
      <pre class="question">${clarify.question!}</pre>
      <form class="clarform form-horizontal" action="/api/contest/updateClarify" method="post">
        <span class="name">Administrator</span> reply<#if clarify.atime??> at
        <span class="timestamp" data="${clarify.atime!0}"></span></#if>
        <div class="control-group">
        <textarea name="reply" class="input-block-level<#if !clarify.atime??> error</#if>">${clarify.reply!}</textarea>
        </div>
        <label class="radio inline"><input name="ispublic" type="radio" value="1" <#if clarify.public>checked</#if>>
          Public </label>
        <label class="radio inline"><input name="ispublic" type="radio" value="0" <#if !clarify.public>checked</#if>>
          Private </label>
        <input name="id" type="hidden" value="${clarify.id}">
        <input name="cid" type="hidden" value="${cid}">
        <input type="submit" class="btn btn-primary" value="Answer">
      </form>
      <hr>
    </#list>
  </#if>
</div>
  <div class="text-center">
    <button class="btn btn-primary" id="newQuestion" data-toggle="modal" data-target="#postModal">
      Post Clarification
    </button>
  </div>

<div class="modal hide fade contestModal" id="postModal">
  <form class="form-horizontal" id="postForm" action="/api/contest/postClarification" method="post">
    <div class="modal-header">
      <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
      <h3 id="postModalLabel">
        <a href="contest/post/${cid!}" title="Post in another page" data-toggle="tooltip" data-placement="bottom">
          Post Clarification</a>
      </h3>
    </div>
    <div class="modal-body">
      <input type="hidden" name="cid" value="${cid!}">
      <#if contestProblems??>
        <select class="input-large" id="inputProblem" name="num">
          <option value="">Problem</option>
          <#list contestProblems as Problem>
            <option value="${Problem.num!}"<#if pid?? && pid==Problem.num>selected</#if>>${Problem.id!}
              . ${Problem.title!}</option>
          </#list>
        </select>
      </#if>
      <textarea name="clarification" rows="10"></textarea>
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-primary">Submit</button>
      <button class="btn" data-dismiss="modal">Cancel</button>
    </div>
  </form>
</div>
</@override>

<@override name="styles">
<link rel="stylesheet" type="text/css" href="assets/tipsy/css/tipsy.css">
<link rel="stylesheet" href="assets/jquery.artDialog/skins/twitter.css">
<style>
  textarea.error {
    color: #b94a48;
    border-color: #e9322d;
    -webkit-box-shadow: 0 0 6px #f8b9b7;
    -moz-box-shadow: 0 0 6px #f8b9b7;
    box-shadow: 0 0 6px #f8b9b7;
  }
</style>
</@override>

<@override name="scripts">
<script src="assets/tipsy/js/jquery.tipsy.min.js"></script>
<script src="assets/jquery.artDialog/jquery.artDialog.js"></script>
<script type="text/javascript">
  $(function () {
    $('#postForm').submit(function () {
      $.post($(this).attr("action"), $('#postForm').serialize(),
              function (data) {
                if (data.success) {
                  $.dialog().content('Ok.').lock().time(2);
                  setTimeout(function () {
                            window.location.reload();
                          },
                          2000);
                } else {
                  $.dialog({
                    content: data.result || 'Post question failed!',
                    time: 1.5
                  });
                }
              });
      return false;
    });
    $('.clarform').submit(function () {
      var dialog = $.dialog();
      var that = $(this);
      $.post($(this).attr("action"), that.serialize(),
              function (data) {
                if (data.success) {
                  that.children('.error').removeClass('error');
                  dialog.content('Success.').lock().time(1.5);
                } else {
                  $.dialog({
                    content: data.result || 'Update clarify failed!',
                    time: 1.5
                  });
                }
              });
      return false;
    });
  });
</script>
</@override>
<@extends name="_layout.html" />
